<template>
	<div>
		<ul class="menu">
			<li v-for="summary in summaries">
				<div @click="menu(summary.code)">{{ summary.title }}</div>
			</li>
		</ul>
	</div>
</template>

<script>
import Msg from './Msg.js';
export default {
	data() {
		return {
			summaries: []
		};
	},
	methods: {
		/**
		 * 点击事件
		 * @param {Object} code 商品类型 0 推荐  1 手机  2电脑...
		 */
		menu(code) {
			Msg.$emit('code', code);
		}
	},
	mounted() {
		var _this = this;
		//读取json数据
		this.$http.get('json/data.json').then(function(res) {
			console.log('Left中接收到' + res);
			//按照order排序
			var data = res.data.sort((a, b) => a.order - b.order);
			if (data) {
				_this.summaries = data;
			} else {
				_this.list = [];
			}
		});
	}
};
</script>

<style>
.title {
	width: 6.25rem;
	color: #ff5454;
}
.menu {
	margin-top: 0.125rem;
}
.menu li {
	list-style: none;
	height: 3.125rem;
	margin-bottom: 0.125rem;
	background-color: white;
	line-height: 3.125rem;
	cursor: pointer;
}
.menu li:hover {
	background-color: #ff5454;
	color: #f5f5f5;
}
</style>
